<template>
  <div class="vben-detail-layout">
    <div class="vben-detail-layout__header">
      <span class="vben-detail-layout__title">详情</span>
      <button class="vben-detail-layout__edit-button" @click="handleEdit('UPDATE')">编辑</button>
    </div>
    <div class="vben-detail-layout__detail-row">
      <div class="vben-detail-layout__detail-item" style="display: inline-flex; align-items: center" v-for="(attr, index) in attrList" :key="index">
        <span class="vben-detail-layout__field-name">{{ attr?.attrDisplayName }}:</span>
        <span class="vben-detail-layout__field-value">
          <template v-if="attr?.attrName === 'icon'">
            <span :class="attr?.displayName || ''"></span>
          </template>
          <template v-else>
            {{ attr?.displayName || '' }}
          </template>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineProps, onMounted } from "vue";
  import { attribute } from "#/api";
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const props = defineProps({
    pid: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      required: true,
    }
  });

  // 数据展示
  const attrList = ref([]);

  // 获取属性数据
  const getAttribute = async (pid) => {
    try {
      const res = await attribute(pid);
      attrList.value = res.attrList || []; // 确保有数据
    } catch (error) {
      console.error("Error fetching attributes", error);
    }
  };

  // 编辑按钮点击事件
  const handleEdit = (operate) => {
    const className = typeof props.className === 'string'? props.className : props.className.value;
    const pid = typeof props.pid === 'string'? props.pid : props.pid.value;
    router.push({ path: '/form', query: { type: operate, className, pid } });
  };

  // 在组件挂载后加载数据
  onMounted(() => {
    if(typeof props.pid === 'string' ){
      getAttribute(props.pid);
    } else {
      getAttribute(props.pid.value);
    }
  });
</script>

<style scoped>
  .vben-detail-layout {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .vben-detail-layout__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .vben-detail-layout__title {
    font-size: 16px;
    font-weight: bold;
  }

  .vben-detail-layout__edit-button {
    background-color: #1890ff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .vben-detail-layout__edit-button:hover {
    background-color: #40a9ff;
  }

  .vben-detail-layout__detail-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 分为两列 */
    gap: 16px; /* 设置列之间的间距 */
    padding: 8px 0;
  }

  .vben-detail-layout__detail-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* 设置字段名和值之间的间距 */
  }


  .vben-detail-layout__field-value {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .divider {
    height: 1px;
    background-color: #d9d9d9;
    margin: 8px 0;
  }
</style>
